import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { EventDetailWrap } from "./style";
import EventComment from "@/components/user/eventComment";
import { userEventAction, userDetailAction } from "../../store/actionTypes";

export default memo(function EventDetail(props) {
  const commentId = props.location.search.split("=")[1].split("&")[0];
  const userId = props.location.search.split("=")[2];
  const indexId = parseInt(props.location.search.split("index=")[1]);
  const [openCheck, setOpenCheck] = useState(true);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(userEventAction(parseInt(userId), 100000000));
    if (userDetailInfo.length == 0) {
      dispatch(userDetailAction(userId));
    }
  }, [dispatch, userId]); // eslint-disable-line react-hooks/exhaustive-deps
  const { userDetailInfo, userEventInfo } = useSelector(
    (state) => ({
      userEventInfo: state.getIn(["userInfo", "userEventInfo"]),
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );
  return (
    <EventDetailWrap>
      <div className="event-box wrap-v2">
        <div className="eventDetail-box">
          {userEventInfo.code == 200 ? (
            <EventComment
              open={openCheck}
              userDetailInfo={userDetailInfo}
              item={userEventInfo.events ? userEventInfo.events[indexId] : ""}
            />
          ) : (
            ""
          )}
        </div>
      </div>
    </EventDetailWrap>
  );
});
